<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css" media="screen">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background: #000;
        }

        #ul1 {
            width: 133px;
            height: 247px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -67px;
            margin-top: -200px;
            transform: perspective(800px) rotateX(-10deg);
            transform-style: preserve-3d;
        }

        #ul1 li {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: url(img/1.jpg) no-repeat;
            background-size: 100% 100%;
            box-shadow: 0 0 20px #fff;
            -webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.4));
        }

        /*#ul1:active li{
transform:rotateY(60deg) translateZ(200px);
}*/
    </style>
</head>

<body>
    <ul id="ul1">

    </ul>
</body>
<script type="text/javascript">
    window.onload = function () {
        var oUl = document.getElementById('ul1');
        var N = 11;
        for (var i = 0; i < N; i++) {
            var oLi = document.createElement('li');
            oLi.style.backgroundImage = 'url(img/' + (i + 1) + '.jpg)';
            oUl.appendChild(oLi);
            oLi.style.transition = '.4s all ease ' + (N - i) * 200 + 'ms';
            (function (oLi, i) {
                setTimeout(function () {
                    oLi.style.transform = 'rotateY(' + 360 / N * i + 'deg) translateZ(300px)';
                }, 0);
            })(oLi, i);
        }
        //键盘控制
        var y = 0;
        var x = -10;
        var aLi = oUl.children;
        aLi[0].addEventListener('transitionend', function () {
            change();
        }, false);
        //拖拽
        var lastX = 0;
        var lastY = 0;
        var iSpeedX = 0;
        var iSpeedY = 0;
        var timer = null;
        document.onmousedown = function (ev) {
            var disX = ev.clientX - y;
            var disY = ev.clientY - x;
            clearInterval(timer);
            for (var i = 0; i < aLi.length; i++) {
                aLi[i].style.transition = 'none';
            }
            document.onmousemove = function (ev) {
                y = ev.clientX - disX;
                x = ev.clientY - disY;
                change(y / 3, x / 3);
                iSpeedX = ev.clientX - lastX;
                iSpeedY = ev.clientY - lastY;
                lastX = ev.clientX;
                lastY = ev.clientY;
            };
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
                timer = setInterval(function () {
                    iSpeedX *= 0.95;
                    iSpeedY *= 0.95;
                    y += iSpeedX;
                    x += iSpeedY;
                    change(y / 3, x / 3);
                }, 30);
            };
            return false;
        };
        function change(y, x) {
            for (var i = 0; i < aLi.length; i++) {
                //aLi[i].style.transition='1s all ease';
                aLi[i].style.transform = 'rotateY(' + (360 / N * i + y) + 'deg) translateZ(300px)';
                oUl.style.transform = 'perspective(800px) rotateX(' + -x + 'deg)';
                var scale = Math.abs(Math.abs((360 / N * i + y) % 360) - 180) / 180;
                scale < 0.3 && (scale = 0.3);
                aLi[i].style.opacity = scale;
            }
        }
    };
</script>

</html>